<div class="panel panel-default">
    <div class="panel-heading">{{ isset($title) ? $title : "" }}</div>
<div class="panel-body">
    <canvas id="{!! $name !!}"></canvas>
</div>
</div>
<script>

    $(function () {
        var ctx = document.getElementById("{!! $name !!}").getContext('2d');
        var gamelog = JSON.parse(`{!! $counter !!}`);
        var dataList = Array();
        // var label=Array();
        var label = JSON.parse(`{!! $answer !!}`);
        for (index in gamelog)
        {
            dataList.push(gamelog[index]);
        }


        var data = {
            datasets: [{
                data: dataList,
                backgroundColor: [
                    'rgba(255, 99, 132)',
                    'rgba(54, 162, 235)',
                    'rgba(44, 206, 86)',
                    'rgba(75, 55, 22)',
                    'rgba(153, 102, 255)',
                    'rgba(255, 159, 64)'
                ]
            }],

            // These labels appear in the legend and in the tooltips when hovering different arcs
            labels: label,

        };
        var myDoughnut = new Chart(ctx, {
            type: 'pie',
            data: data,
            options: {
                rotation: 0
            }
        });

    });
</script>